<script lang="ts" setup>
	import { ref, onMounted } from 'vue';
	import { getArticles, getAllArticlesBytnId } from '@/api/article.js';
	import { schBaseInfo } from '@/api/school.js';
	import cookie from '../../store/cookie';

	const articleList = ref(['心理品质提升', '心理科普', '心理百科']);
	const articleCurrentIndex = ref(0);
	const tenantId = ref('')
	const sideArticles = ref([]);
	const allArticlesInfo = ref<any[]>([]);
	// 轮播图图片
	const artInfoImageList1 = ref<any[]>([]);
	// 今日话题图片
	const artInfoImageList2 = ref<any[]>([]);
	// 热门咨询图片
	const artInfoImageList3 = ref<any[]>([]);
	// 一周速读图片 
	const artInfoImageList4 = ref<any[]>([]);
	// 专题推荐图片 
	const artInfoImageList5 = ref<any[]>([]);

	// const schoolDomain = 'h5.sfzz.cp.zxzyn.com'  
	// const schoolDomain = 'localhost'
	// #ifdef APP-PLUS
	const schoolDomain = 'localhost'
	// #endif
	// #ifndef APP
	// const schoolDomain = window.location.hostname
	// const schoolDomain = 'localhost'
	const schoolDomain = 'h5.sfzz.cp.zxzyn.com'
	// const schoolDomain =  'flxx.test.zxzyn.com'  

	// #endif


	onMounted(() => {
		getSchoolInfo();
	});

	const getSchoolInfo = () => {
		let item1 = {
			domain: schoolDomain
		}
		schBaseInfo(item1).then((res) => {
			tenantId.value = res.data.data.code
			let item2 = {
				tenantId: 0
			}
			getAllArticlesBytnId(item2).then((res) => {
				allArticlesInfo.value = res.data.data.records;
				allArticlesInfo.value.map((item) => {
					switch (item.artModule) {
						case "jtht":
							artInfoImageList2.value.push(item);
							break;
						case "rmzx":
							artInfoImageList3.value.push(item);
							break;
						case "yzsd":
							artInfoImageList4.value.push(item);
							break;
						case "zttj":
							artInfoImageList5.value.push(item);
						case "lbt":
							artInfoImageList1.value = item.artInfoImageList;
							break;
					}
				})

			})
				.catch((error) => {
					console.log('error:', error);
				})
		})
	}

	const changeArticleClass = (index : number) => {
		articleCurrentIndex.value = index;
		if (index == 0) {
			sideArticles.value = artInfoImageList3.value;
		} else if (index == 1) {
			sideArticles.value = artInfoImageList4.value;
		} else if (index == 2) {
			sideArticles.value = artInfoImageList5.value;
		}
	};

	const navigateTo = (id : any) => {
		uni.navigateTo({
			url: '/pages/index/article/article?id=' + id,
		});
	};

	const navigateToGame = () => {
		uni.navigateTo({
			url: '/pages/game/game',
		});

	}
	const reLunchto = (e : string) => {
		uni.reLaunch({
			url: e
		})
	}
</script>

<template>
	<view class=" flex-column valign-center wh100p">
		<tabbar style="position: sticky;top: -1px;z-index: 999;"></tabbar>

		<view class="body flex-column gap18">
			<view class="header flex " style="margin-bottom: 100rpx;">
				<view class="swiper">
					<u-swiper :list="artInfoImageList1" height="800rpx" indicator indicatorMode="line"
						circular></u-swiper>
				</view>
				<view class="control flex ml12"
					style="justify-content:start;align-items: flex-start;align-self: self-start;width: 35%;">
					<view class="bloc">
						<!-- <navigator url="/pages/appointment/index" hover-class="other-navigator-hover"> -->
						<button type="default" @click="reLunchto('/pages/appointment/index')">心理咨询预约</button>
						<!-- </navigator> -->
					</view>

					<view class="bloc">
						<!-- <navigator url="/pages/appointment/record/index" hover-class="other-navigator-hover"> -->
						<button type="default" @click="reLunchto('/pages/appointment/record/index')">心理咨询记录</button>
						<!-- </navigator> -->
					</view>
					<view class="bloc">
						<!-- <navigator url="/pages/evaluation/taskList/taskList" hover-class="other-navigator-hover"> -->
						<button type="default" @click="reLunchto('/pages/evaluation/taskList/taskList')">量表测评</button>
						<!-- </navigator> -->
					</view>
					<view class="bloc">
						<!-- <navigator url="/pages/evaluation/taskList/taskList" hover-class="other-navigator-hover"> -->
						<button type="default" @click="reLunchto('/pages/evaluation/taskList/taskList')">趣味心检</button>
						<!-- </navigator> -->
					</view>
					<view class="bloc">
						<navigator
							url="/pages/index/articleClass/articleClass?classId=1735205680009592834&classTitle=心理图片"
							hover-class="other-navigator-hover">
							<button type="default">心理图片</button>
						</navigator>
					</view>
					<view class="bloc">
						<navigator
							url="/pages/index/articleClass/articleClass?classId=1735205847756587009&classTitle=心理解惑"
							hover-class="other-navigator-hover">
							<button type="default">心理解惑</button>
						</navigator>
					</view>
					<view class="bloc">
						<navigator
							url="/pages/index/articleClass/articleClass?classId=1735205881688506370&classTitle=心理图书"
							hover-class="other-navigator-hover">
							<button type="default">心理图书</button>
						</navigator>
					</view>
					<view class="bloc">
						<navigator url="/pages/musicRelax/musicMoudleList/musicMoudleList"
							hover-class="other-navigator-hover">
							<button type="default">心理音乐</button>
						</navigator>
					</view>
					<view class="bloc">
						<navigator
							url="/pages/index/articleClass/articleClass?classId=1735206032477929474&classTitle=心理影片"
							hover-class="other-navigator-hover">
							<button type="default">心理影片</button>
						</navigator>
					</view>
					<view class="bloc" v-if="true">
						<navigator url="/pages/consultationCenter/index" hover-class="other-navigator-hover">
							<button type="default">咨询中心介绍</button>
						</navigator>
					</view>

					<view class="bloc" v-if="true">
						<view>
							<button type="default" @click="navigateToGame">智力游戏</button>
						</view>
					</view>
				</view>
			</view>
			<view class=" w100p flex" style="flex: 1;">
				<uni-card :is-shadow="true" style="width: 65%;box-sizing: border-box;" margin='0'>
					<uni-section class="mb-10" title="心理动态" type="line" titleFontSize="1.1rem">
						<scroll-view scroll-y="true" style="max-height: 500px;overflow: scroll;">
							<cardItem :list='artInfoImageList2'></cardItem>
						</scroll-view>
					</uni-section>
				</uni-card>

				<view style="width: 35%;" class="flex-center ml12">
					<view class="custom" style="width: 100%;">
						<!-- 分段器 -->
						<view class="gui-dark-bg-level-3 gui-padding-x ">
							<view class="gui-flex gui-row gui-justify-content-center ">
								<view style="width:100%;">
									<gui-segmented-control :current="articleCurrentIndex" :items="articleList"
										@change="changeArticleClass"></gui-segmented-control>
								</view>
							</view>
						</view>
						<view class="gui-dark-bg-level-3 gui-padding-x ">
							<view class="bgfffff flex-column padding-12_32_12_32">
								<view class="flex valign-center " style="justify-content: start;"
									@click="navigateTo(item.id)" v-for="(item,index) of sideArticles" :key="index">
									<view class="flex valign-center"
										style="width: 16px;height: 16px;background-color: coral;border-radius: 10rpx;margin: 12rpx;">
										<text class="font12" style="color: white;">{{index+1}}</text>
									</view>
									<view class="font12">{{item.name}}</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="footer"></view>
	</view>
</template>

<style>
	/* page {
		background-color: rgb(240, 244, 249);
	} */

	.body {
		box-sizing: border-box;
		padding: 80rpx;
		width: 100%;
		height: 100%;
	}

	.bloc {
		width: 28%;
		min-width: 140px;
		margin: 0 10px 5px;

	}

	.header {
		width: 100%;
	}

	.swiper {
		flex: 1;

		height: 700rpx;
	}

	.control {
		/* flex-grow: 1; */
		flex-wrap: wrap;
	}

	.flex {
		display: flex;
	}

	/deep/.custom .u-subsection .u-subsection--button__bar {
		background-color: #2b92ff
	}
</style>